<template>
    <div>
        <div class="seach">
            <span class="SUP">
                <span class="seachCSC">
                    {{$t('interfacename')}}
                    <el-input v-model.trim="opnlistForm.interName" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachStatus">
                    {{$t('sta')}}
                    <el-select v-model="opnlistForm.status" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('vlid')" :value="true"></el-option>
                        <el-option :label="$t('invlid')" :value="false"></el-option>
                    </el-select>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seachOpn" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="opnlistTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('pdtnam')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('interfacename')">
                </el-table-column>
                <el-table-column prop="sendChannelOrderNo" :label="$t('interfacever')">
                </el-table-column>
                <el-table-column prop="payStatus" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showaddOpn(scope.row)">{{$t('add')}}</el-link>
                        <el-link type="primary" @click="detailsOpn(scope.row)">{{$t('mdfy')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="opnlistForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="opnlistForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addOpnForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addOpnForm" :rules="addOpnRul" :model="addOpnForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('pdtnam')" prop="productName">
                    <el-input v-model.trim="addOpnForm.productName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('interfacename')" prop="productCode">
                    <el-input v-model.trim="addOpnForm.productCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('interfacever')" prop="parentCode">
                    <el-input v-model.trim="addOpnForm.parentCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model.trim="addOpnForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="'-' + $t('plsset') + '-'" value="null"></el-option>
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addPro(addOpnForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            total: 0,
            isOk: false,
            addDialogVisible: false,
            opnlistForm: {
                interName: null,
                status: null,
                pageNum: 1,
                pageSize: 10
            },
            opnlistTab: [],
            addOpnForm: {
                productName: null,
                productCode: null,
                parentCode: null,
                status: null
            },
            addOpnRul: {
                productName: [
                    { required: true, message: this.$t('protnamctemy'), trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: this.$t('protcodctemy'), trigger: 'blur' }
                ],
                parentCode: [
                    { required: true, message: this.$t('hierlevlcodctemy'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('stactemy'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getOpnList () {},
        seachOpn () {
            this.getOpnList()
        },
        showaddOpn () {
            this.addDialogVisible = true
        },
        detailsOpn () {},
        handleSizeChange (newSize) {
            this.selMrec.pageSize = newSize
            this.seachOpn()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selMrec.pageNum = newNum
            this.seachOpn()
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        this.getOpnList()
    }
}
</script>

<style lang="less" scoped>
@import './opnList.less';
</style>
